<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs active-color="#007AFF" :list="tabList" @change="tabsChange" />
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item,index)">
				<view class="boxSty">
					<fui-text :text="item.detail + '接口数据'" :size="32" type="primary"></fui-text>
					<view class="line"></view>
					<view class="bottom">
						<fui-tag :text="typeStr" :padding="['10rpx', '22rpx']"></fui-tag>
						<fui-text :text="time" :size="28" type="primary" ></fui-text>
					</view>
				</view>
				
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance(); //获取上下文实例，ctx=vue2的this,=>proxy.tui
	const dataList = ref([])
	const tabList = ref(['待审批','已驳回','已审批'])
	const tabIndex = ref(0)
	const paging = ref(null)
	const time = ref('')
	const typeStr = ref('待审批')
	
	onMounted(() =>{
		let now = new Date();
		time.value = now.getFullYear() + "-" + (now.getMonth() + 1).toString().padStart(2, "0") + "-" + now.getDate().toString().padStart(2, "0") + " " + now.getHours().toString().padStart(2, "0") + ":" + now.getMinutes().toString().padStart(2, "0") + ":" + now.getSeconds().toString().padStart(2, "0");
	})
	
	const tabsChange = (index) =>{
		tabIndex.value = index;
		if (index == 0) {
			typeStr.value = '待审批'
		} else if (index == 1){
			typeStr.value = '已驳回'
		} else{
			typeStr.value = '已审批'
		}
		paging.value.reload();
	}
	const queryList = (pageNo, pageSize) =>{
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求
		const params = {
			pageNo: pageNo,
			pageSize: pageSize,
			type: tabIndex.value + 1
		}
		proxy.request.queryList(params).then(res => {
			// 将请求的结果数组传递给z-paging
			console.log(res);
			paging.value.complete(res.data.list);
		}).catch(res => {
			// 如果请求失败写this.$refs.paging.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}
	
	const itemClick = (item, index) =>{
		console.log('点击了', item.title);
		uni.navigateTo({
			url: `/pages/index/information/information?data=${JSON.stringify(item)}&type=${tabIndex.value}`
		})
	}
	
</script>

<style lang="scss" scoped>
	.item {
		height: 180rpx;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		
		.boxSty{
			width: 100%;
			height: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: white;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			.line {
				margin-top: 20rpx;
				border-top: 1rpx dashed #a0c5e8;
			}
			.bottom{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		
	}
	
	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}
	
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>
